<template>
  <div class="product-settings-container">
    <h2>产品设置</h2>
    <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange">
      <el-tab-pane
        v-for="(tabConfig, tabKey) in tabList"
        :key="tabKey"
        :label="tabConfig.label"
        :name="tabKey"
      >
        <keep-alive>
          <ProductForm
            :ref="(el) => (formRefs[tabKey] = el)"
            :product-type="tabKey"
            :is-edit="isEditMode"
            :product-config="productConfigs[tabKey]"
            @save="handleProductSave"
          />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>

  <div class="product-settings-container">
    <h2>管控设置</h2>
    <keep-alive>
      <ControlForm
        :key="activeTab"
        :is-edit="isEditMode"
        :tab-key="activeTab"
        :control-config="productConfigs.control[activeTab]"
        @save="handleControlSave"
      />
    </keep-alive>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import ProductForm from "./ProductForm.vue";
import ControlForm from "./ControlForm.vue";

// 标签页常量（合并定义）
const allTabs = ["flight", "hotel", "train", "car"];
const tabList = {
  flight: { label: "机票" },
  hotel: { label: "酒店" },
  train: { label: "火车" },
  car: { label: "用车" },
};

// 产品与管控配置（保留核心数据）
const productConfigs = reactive({
  flight: {
    isOnline: false,
    selectedProviders: ["携程商旅", "中航服"],
    selectedForeignProviders: ["中航服"],
    approvalType: "pre",
    serviceProviders: [
      "携程商旅",
      "阳光商旅",
      "中航服",
      "德讯商旅",
      "差旅壹号",
      "胜意之旅",
    ],
    foreignServiceProviders: ["德讯商旅", "中航服"],
  },
  hotel: {
    isOnline: true,
    selectedProviders: ["携程酒店", "华住会"],
    selectedForeignProviders: ["携程酒店"],
    approvalType: "post",
    serviceProviders: [
      "携程酒店",
      "美团酒店",
      "飞猪酒店",
      "华住会",
      "如家酒店",
    ],
    foreignServiceProviders: ["携程酒店", "booking.com"],
  },
  train: {
    isOnline: true,
    selectedProviders: ["12306", "携程火车票"],
    selectedForeignProviders: [],
    approvalType: "pre",
    serviceProviders: ["12306", "携程火车票", "飞猪火车票", "去哪儿火车票"],
    foreignServiceProviders: [],
  },
  car: {
    serviceProviders: ["滴滴出行", "高德打车", "首汽约车", "神州专车"],
    foreignServiceProviders: ["滴滴国际", "Uber"],
    happyType: "singing",
  },
  control: {
    flight: {
      controlMode: "post",
      controlItems: ["time"],
      bookingAuth: "department",
      allowMultiPolicies: true,
    },
    hotel: {
      controlMode: "post",
      controlItems: ["location"],
      bookingAuth: "company",
      allowMultiPolicies: false,
    },
    train: {
      controlMode: "post",
      controlItems: ["time"],
      bookingAuth: "self",
      allowMultiPolicies: true,
    },
    car: {
      controlMode: "post",
      controlItems: [],
      bookingAuth: "department",
      allowMultiPolicies: false,
    },
  },
});

// 状态管理（移除冗余的单个表单引用）
const activeTab = ref("flight");
const isEditMode = ref(true);
const formRefs = ref({}); // 用ref对象统一管理表单引用

// 全局数据存储（保留核心结构）
const allTabsData = reactive({
  products: Object.fromEntries(allTabs.map((tab) => [tab, null])),
  controls: { ...productConfigs.control },
});

// 标签页切换处理（简化保存逻辑）
const handleTabChange = async (newTab) => {
  // 保存当前产品数据
  const currentForm = formRefs.value[activeTab.value];
  if (currentForm) {
    try {
      await currentForm.handleSave();
    } catch (e) {
      ElMessage.warning(`【${activeTab.value}产品】数据未完善`);
    }
  }

  // 执行切换
  activeTab.value = newTab;
};

// 简化保存回调
const handleProductSave = (data) => {
  allTabsData.products[data.productType] = data;
};
const handleControlSave = (data) => {
  allTabsData.controls[activeTab.value] = data;
};
</script>

<style scoped>
.product-settings-container {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

h2 {
  margin-bottom: 20px;
  color: #1f2329;
  font-size: 18px;
  font-weight: 600;
}

.product-settings-container + .product-settings-container {
  margin-top: 30px;
}
</style>
